import React, { useState } from 'react';

export default function Parent() {
    const [count1, setCount1] = useState(0);
    const [count2, setCount2] = useState(0);

    const minusCount2 = () => setCount2(count2 - 1);

    return <>
        <button onClick={() => setCount1(count1 + 1)}>Add count1: {count1}</button>
        <button onClick={() => setCount2(count2 + 1)}>Add count2: {count2}</button>
        <br />

        <Son1 count={count1} />
        <Son2 count={count2} minus={minusCount2} />
    </>
}

function Son1({ count }) {
    return <div>Son1: {count}</div>
}

function Son2({ count, minus }) {
    console.log('Son2 render');
    return <div>
        Son2: {count} &nbsp;
        <button onClick={minus}>minus</button>
    </div>
}
